
// styling the tabs of the /rooms, /prefs and similar pages.

.home-tabs {
	@include flexbox(row, stretch);
	height: 30px;
	.home-tab {
		background: $home-tab-bg;
		text-align: center;
		padding: 8px;
		margin: 0 5px;	
		z-index: 2;
		cursor: pointer;
		box-shadow: $home-mi-shadows;
		position: relative;
		color: $home-tab-unselected-color;
		&.selected {
			z-index: 4;
			cursor: inherit;
			color: $home-tab-selected-color;
			box-shadow: $home-main-shadows;
			&::after {
				position: absolute;
				top: 25px;
				left: 0;
				width: 100%;
				height: 10px;
				background: $home-tab-bg;
				z-index: 5;
				content: ' ';
			}
			&::before {
				position: absolute;
				top: 30px;
				left: -10px;
				width: 130%;
				height: 15px;
				background: $home-tab-bg;
				z-index: 6;
				content: ' ';
			}
		}
	}
}


body.mobile .home-tabs {
	.home-tab {
		padding: 8px 4px;
		margin: 0 2px;
	}
}
.home-page {
	width: 100%;
	display: none;
	&.selected {
		display: block;
	}
}

// The /rooms page on mobile has currently a different layout (in order
//  to keep tabs always visible)

.mobtabs {
	display: flex;
	align-items: stretch;
	width: 100%;
	background: $home-top-bg;
	box-shadow: $home-main-shadows;
	padding: 3px;
	.home-tab {
		padding: 5px;
		flex-grow: 1;
		text-align: center;
		color: transparentize( $home-top-color, .35);
		&.selected {
			color: $home-top-color;
		}
	}
}
